<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件练习</title>
    <style>
        *{
            list-style: none;
        }
        div{
            position: fixed;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        ul{
            width: 300px;
            border: 1px solid red;
            height: 1000px;
            overflow: scroll;
            position: relative;
        }
        .last{
            position: absolute;
            top: 600px;
            right: 100px;
            height: 50px;
            width: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>123</li>
        <li>321</li>
        <li>34r34</li>
        <li>321</li>
        <li>123</li>
        <li>12reg3</li>
        <li>12dsg3</li>
        <li>gs</li>
        <li>123</li>
        <li>1dsgfsdg23</li>
        <li>123</li>
        <li>1sdfg23</li>
        <li>1gds23</li>
        <li>123</li>
        <li>123</li>
        <li>12gds3</li>
        <li>1bvcxvbx23</li>
        <li>123</li>
        <li>1bvcc23</li>
        <li>123</li>
        <li>12gxcv3</li>
        <li>123</li>
        <li>12xcbvcx3</li>
        <li>123</li>
        <li>12gdsfg3</li>
        <li>123</li>
        <li>12bvcxb3</li>
        <li>123</li>
        <li>123</li>
        <li>1bxcv23</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>12fgsv3</li>
        <li>123</li>
        <li>1trew23</li>
        <li>123</li>
        <li>12fsdgds3</li>
        <li>12bcx3</li>
        <li>12gsd3</li>
        <li>123</li>
        <li>12gsd3</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>12gds3</li>
        <li>123</li>
        <li>123</li>
        <li>1vzxcb23</li>
        <li>123</li>
        <li>12sdzx3</li>
        <li>12vcz3</li>
        <li>12bxc3</li>
        <li>12gdsg3</li>
        <li>12bcvxb3</li>
        <li>12sgs3</li>
        <div class="last">top</div>
    </ul>
    <div class="box">到顶部</div>
    <script>
        
        /*
         * 1、点击事件 onclick
         */
        // 1-1、点击列表中的某项,该项移除。
        // 1-2、点击列表中的某项,其背景变色。
        // 1-3、点击按钮btnTop,网页滚动到顶部。
        // 1-3、点击按钮btnToList,网页滚动到列表顶部(需要获取列表的位置)。


        $all('li').forEach(item=>{
            item.onclick=function(){
                item.style.backgroundColor='#000'
                setTimeout(() => {
                    item.remove()
                }, 50);
            }
        })

        // $all('li').forEach(item=>{
        //     item.onclick=function(){
        //         item.remove()
        //     }
        // })




        $('.box').onclick=function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0
        }

        $('.last').onclick=function(){
            $('ul').scrollTop=0
        }


        /*
         * 2、鼠标事件 mouseover、mouseout
         */
        // 2-1、鼠标移入列表中的某项,该项发生2px位移,鼠标离开,该项位置还原。
        // 2-2、鼠标移入mousebox,添加变宽的过渡效果。
        // 2-3、一颗跳动(帧动画变大变小)的小星星跟随鼠标移动。


        /*
         * 3、按键 keypress
         */
        // 3-1、按方向键"上",keybtn盒子向上缓动移动100px,然后缓动回到原始位置。
        // 3-2、按Ctrl+C把盒子domA里面的内容存储在变量里面copyA,按Ctrl+V把copyA的内容显示到盒子domB里面


        /*
         * 4、改变 change
         */
        //页面中添加一个输入框，内部添加关键词，多个关键词使用单一空格隔开
        //当每次输入完毕后，在控制台输出所有关键词构成的数组


        /*
         * 5、失去焦点 blur 
         */
        //页面中添加一个输入框，用来输入年龄
        //当输入完毕后，判断年龄是否合法，如果合法在输入框下面使用绿色小字提示合法
        //如果不合法，在输入框下面使用红色小子提示不合法


        /*
         * 6、获取焦点 focus 
         */
        //请模拟出一个场景，并实现它
        

        /*
         * 7、元素加载、窗口加载 load
         */
        // 7-1、图片加载完后输出图片的宽高比


        /*
         * 8、窗口尺寸变化 resize 
         */
        // 8-1、左大右小两个盒子,窗口尺寸变化时,如果窗口的宽小于1200px就把右侧盒子隐藏,左侧盒子宽变100%。
        // 8-2、有个宽高比为2:1的盒子，在版心1200px里面沾满一行，当窗口缩小到1200px以下后，版心宽变成100%，盒子宽高比保持一致。


        /*
         * 9、页面滚动 scroll
         */
        // 9-1、上面LOGO，下面一排导航，当滚动条滚动到导航时，将导航设置为fixed的定位属性(吸顶)。(需要页面很长,出现滚动条)
        
        function $(id){
            return document.querySelector(id)
        }
        function $all(id){
            return document.querySelectorAll(id)
        }
    </script>

</body>
</html>